<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <link rel="shortcut icon" href="/static/adm/assets/img/favicon.ico" />
    <!-- Loading Bootstrap -->
    <link href="/static/adm/assets/css/backend.min.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="static/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->


    <style type="text/css">
        body {
            color:#999;
            background-size:cover;
        }
        a {
            color:#fff;
        }
        .login-panel{margin-top:150px;}
        .login-screen {
            max-width:400px;
            padding:0;
            margin:100px auto 0 auto;

        }
        .login-screen .well {
            border-radius: 3px;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background: rgba(255,255,255, 0.2);
        }
        .login-screen .copyright {
            text-align: center;
        }
        @media(max-width:767px) {
            .login-screen {
                padding:0 20px;
            }
        }
        .profile-img-card {
            width: 100px;
            height: 100px;
            margin: 10px auto;
            display: block;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }
        .profile-name-card {
            text-align: center;
        }

        #login-form {
            margin-top:20px;
        }
        #login-form .input-group {
            margin-bottom:15px;
        }

        .captcha img {
            height: 31px;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="login-wrapper">
        <div class="login-screen">
            <div class="well text-center">
                <div class="login-form">
                    <p id="profile-name" class="profile-name-card"></p>
                    <form action="" method="post" id="login-form">
                        <div id="errtips" class="hide"></div>
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                            <input type="text" class="form-control" id="username" placeholder="用户名" name="username" autocomplete="off" value="" />
                        </div>

                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
                            <input type="password" class="form-control" id="password" placeholder="密码" name="password" autocomplete="off" value="" />
                        </div>

                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></div>

                            <input type="text" name="captcha" id="captcha" class="form-control" data-rule="required" placeholder="验证码" />
                            <span class="input-group-addon" style="padding:0;border:none;cursor:pointer;margin-left: 20px;">
                                    <a href="javascript:;" class="captcha" style="background: transparent;"> {:captcha_img()}
                                    </a>
                                </span>
                        </div>
                        <!-- <div class="form-group">
                            <label class="inline" for="keeplogin">
                                <input type="checkbox" name="keeplogin" id="keeplogin" value="1" />
                                保持会话 </label>
                        </div> -->
                        <div class="form-group">
                            <button type="submit"  class="btn btn-success btn-lg btn-block">登 录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/adm/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="/static/adm/assets/libs/layer/src/layer.js"></script>

<script type="text/javascript">
    var load;

    $(".btn-lg").click(function() {
        let username = $("#username").val();
        if (!username) {
            layer.tips('用户名不能为空', '#username', {
                tips: [1, '#3c8dbc'],
                time: 1000
            });
            return false;
        }
        let password = $("#password").val();
        if (!password) {
            layer.tips('密码不能为空', '#password', {
                tips: [1, '#3c8dbc'],
                time: 1000
            });
            return false;
        }
        let captcha = $("#captcha").val();
        if (!captcha) {
            layer.tips('验证码不能为空', '#captcha', {
                tips: [1, '#3c8dbc'],
                time: 1000
            });
            return false;
        }


        $.ajax({
            url: '/adm/10soo_login',
            type: 'post',
            data: {
                username: username,
                password: password,
                captcha: captcha
            },
            dataType: 'json',
            beforeSend: function() {
                load = layer.load(1, {
                    shade: [0.1, '#3c8dbc'] //0.1透明度的白色背景
                }); //0代表加载的风格，支持0-2
            },
            complete: function() {
                layer.close(load);
            },
            success: function(res) {
                console.log(res)
                if (res.code == 0) {
                    layer.msg(res.msg, {
                        icon: 2
                    });
                    $(".captcha").find('img').click();
                } else {
                    //登入成功的提示与跳转
                    layer.msg('登录成功', {
                        icon: 6,
                        time: 1000
                    }, function() {
                        window.location = '/adm/home/index';
                    });

                }
            }
        })
        return false;
    })
</script>

</html>